<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>

    <script src="js/jquery-3.6.0.min.js"></script>
    <script>

        //页面加载就绪函数
        $(function () {
            //给邮箱绑定失去焦点事件
            $('[name="email"]').blur(function () {
                //获取邮箱
                var email = $(this).val();
                //非空验证
                if (email==null||email==""){
                    $("#email_msg").text("邮箱不能为空").css("color","red");
                    return;
                }
                //格式
                var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                if (!reg.test(email)){
                    $("#email_msg").text("邮箱格式不正确").css("color","red");
                    return;
                }
                //唯一:请求服务器查询数据
                $.ajax({
                    url:"student",
                    data:{"method":"checkEmail","email":email},
                    type:"post",
                    dataType:"text",
                    success:function (data) {
                        console.log(data);
                        if (data=="true"){
                            $("#email_msg").text("该邮箱已被注册").css("color","red");
                        }else{
                            $("#email_msg").text("√").css("color","green");
                        }
                    }
                })
            })

            $('[name="sname"]').blur(function () {
                var sname = $(this).val();
                if (sname == null || sname == ""){
                    $("#sname_msg").text("姓名不能为空").css("color","red");
                    return;
                }
                $.ajax({
                    url:"student",
                    data:{"method":"checkSname","sname":sname},
                    type: "post",
                    dataType: "text",
                    success:function (data) {
                        if (data=="true"){
                            $("#sname_msg").text("该姓名已存在").css("color","red");
                        }else{
                            $("#sname_msg").text("√").css("color","green");
                        }
                    }
                })
            })

            $('[name="age"]').blur(function () {
                var age = $(this).val();
                if (age == null || age == ""){
                    $("#age_msg").text("年龄不能为空").css("color","red");
                    return;
                }
                $.ajax({
                    url:"student",
                    data:{"method":"checkAge","age":age},
                    type: "post",
                    dataType: "text",
                    success:function (data) {
                        $("#age_msg").text("√").css("color","green");
                    }
                })
            })
        })
    </script>

</head>
<body>
<form action="student" method="post" enctype="multipart/form-data">
    <table border="1" align="center" cellspacing="0"width="500px" cellpadding="10">
        <caption><h2>添加新学员</h2></caption>
        <tr>
            <td align="center">姓名:</td>
            <td>
                <input type="text" name="sname">
                <span id="sname_msg"></span>
                <!--                给后台服务器传递一个可执行的方法名-->
                <input type="hidden" name="method" value="addStudent">
            </td>
        </tr>
        <tr>
            <td align="center">年龄:</td>
            <td>
                <input type="text" name="age">
                <span id="age_msg"></span>
            </td>
        </tr>
        <tr>
            <td align="center">性别:</td>
            <td>
                <input type="radio" name="sex" value="男" checked>男
                <input type="radio" name="sex" value="女">女
            </td>
        </tr>
        <tr>
            <td align="center">头像:</td>
            <td><input type="file" name="pic"></td>
        </tr>
        <tr>
            <td align="center">学历:</td>
            <td>
                <select name="degree">
                    <option value="专科">专科</option>
                    <option value="本科">本科</option>
                    <option value="硕士">硕士</option>
                    <option value="博士">博士</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="center">邮箱:</td>
            <td>
                <input type="text" name="email">
                <span id="email_msg"></span>
            </td>
        </tr>
        <tr>
            <td align="center">备注:</td>
            <td><textarea name="mark"></textarea></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" name="regist" value="添加">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset" name="reset" >
            </td>
        </tr>
    </table>
</form>
</body>
</html>